<template>
  <div class="logistics">
    <v-navbar></v-navbar>
    <div class="logistics-wrapper" v-if="data.createTime">
      <div class="food" v-if="!data.jfGoodsName">
        <div class="img">
          <img :src="data.goodsLogo" width="100%" height="100%" alt="">
        </div>
        <div class="info">
          <div class="name">{{data.goodsName}}</div>
          <div class="price">
            <span class="text">成交价</span>
            <span class="num">￥{{data.goodsPrice}}</span>
            <span class="text">邮费&nbsp;￥{{data.goodsPostage}}</span>
          </div>
          <div class="time">
            <span class="text">成交时间:</span>
            <span class="text">{{data.createTime | formatDate}}</span>
          </div>
        </div>
      </div>
      <div class="food" v-else>
        <div class="img">
          <img :src="data.jfGoodsLogo" width="100%" height="100%" alt="">
        </div>
        <div class="info">
          <div class="name">{{data.jfGoodsName}}</div>
          <div class="price">
            <span class="text">成交积分</span>
            <span class="num">￥{{data.goodsPrice}}</span>
            <span class="text">邮费&nbsp;￥{{data.goodsPostage}}</span>
          </div>
          <div class="time">
            <span class="text">成交时间:</span>
            <span class="text">{{data.createTime | formatDate}}</span>
          </div>
        </div>
      </div>
      <div class="logistics-info">
        <div class="address" v-if="collectAddress">
          <i class="icon"></i>
          <div class="text">
            <p>【收货地址】{{collectAddress}}</p>
            <div><span>物流单号:</span><span ref="copy">{{logisticsNumber}}</span>
              <button class="btn" v-clipboard:copy="logisticsNumber" v-clipboard:success="onCopy"
                      v-clipboard:error="onError">复制
              </button>
            </div>
          </div>
        </div>
        <ul class="logistics-list">
          <li class="item" v-for="(v, i) in info" :key="i">
            <div class="left end">
              <span class="text day">{{v.time | filterDay}}</span>
              <span class="text hour">{{v.time | filterTime}}</span>
            </div>
            <div class="right">
              <span class="title">{{v.context}}</span>
              <p class="text">{{v.type}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import navbar from '@c/navbar/navbar'
  import sha256 from 'js-sha256'
  import { mapState, mapMutations } from 'vuex'
  import { formatDate } from '@js/formatDate.js'
  import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'
  import { tokenPost, jtpost, gtpost, tokenLink, jtget } from '@api/axiosByToken'

  export default {
    name: 'Logistics',
    data() {
      return {
        data: {},//产品信息
        info: [],//物流详情
        collectAddress: '',//收货地址
        logisticsNumber: '',//物流单号
      }
    },
    components: {
      'v-navbar': navbar,
    },
    computed: {
      ...mapState(['wtitle', 'rback']),
    },
    methods: {
      ...mapMutations(['WTITLE', 'RBACK']),
      // 获得物流信息
      _getLogisticsInfo() {
        let odd = {
          userId: window.localStorage.getItem('userId'),
          id: this.$route.params.id,
        }
        this.$store.state.loadding = true
        tokenPost(tokenLink.auction.info, odd).then(re => {
          this.$store.state.loadding = false
          if (re.status === 0) {
            this.info = re.data.logInf.data
            this.data = re.data.goods[0]
            this.logisticsNumber = re.data.logisticsNumber
            this.collectAddress = re.data.address.province + re.data.address.city + re.data.address.area + re.data.address.realArea
          } else {
            this.$Message.warning(re.msg)
            this.$router.back(-1)
          }
        })
      },
      // 复制订单号
      onCopy() {
        console.log('拷贝成功')
      },
      onError() {
        console.log('无法拷贝')
      },
    },
    created() {
      this.WTITLE('物流详情')
      this.RBACK(true)
      this._getLogisticsInfo()
    },
    filters: {
      filterDay(time) {
        if (time === '') {
          return
        }
        let str = time.substr(5, 5)
        return str
      },
      filterTime(time) {
        if (time === '') {
          return
        }
        let str = time.substr(11, 5)
        return str
      },
      formatDate(time) {
        let date = new Date(time)
        return formatDate(date, 'yyyy/MM/dd hh:mm:ss')
      },
    },
  }
</script>
